import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 导入组件
import discover from '../views/discover'
import follow from '../views/follow'
import my from '../views/my'
import NotFound from '../views/NotFound'
import tuijian from '../views/tuijian'
import bangdan from '../views/bangdan'
import gedan from '../views/gedan'

const routes = [
  // /就代表只输入域名，后面的路径什么都没有输入，那就跳转到/discover
  { path:'/', redirect: '/discover' },
  { 
    name: 'discover', 
    path: '/discover', 
    component: discover,
    // 设置discover的子路由
    children: [
      // 加了/代表路径上直接访问，例如： localhost:8080/#/tuijian
      // 不加/代表要拼接父路由的路径，例如： localhost:8080/#/discover/tuijian
      { name: 'tuijian', path: 'tuijian', component: tuijian },
      { name: 'bangdan', path: 'bangdan', component: bangdan },
      { name: 'gedan', path: 'gedan', component: gedan },
    ]
  },

  // 这里的:id不代表路径叫:id，而是代表这个位置要传递一个数据，参数名是叫id
  // 所以此时要访问这个路由要 /follow/12/jack 来访问，12就是id的值，jack就是name的值，也就是传过去的参数
  { name: 'follow', path: '/follow/:id/:name', component: follow },
  { name: 'my', path: '/my', component: my },

  // *就代表所有路径，除了上面的路径以外的路径,一般是写在路由规则的最后
  { name: 'notFound', path: '*', component: NotFound },
]

const router = new VueRouter({
  routes
})

export default router
